<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认弹窗</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="visible1=!visible1">开启</t-button>
      <t-popup v-model="visible1" title="提示">
        内容内容内容内容内容内容内容内容内容内容内容内容
      </t-popup>
    </dd>
    <dd class="mt20">
      <pre v-highlight="popup1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">弹出方向</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="handlePosition('top')">top</t-button>
      <t-button @click="handlePosition('right')">right</t-button>
      <t-button @click="handlePosition('bottom')">bottom</t-button>
      <t-button @click="handlePosition('left')">left</t-button>
      <t-popup v-model="visible2" :position="position" title="提示">
        内容内容内容内容内容内容内容内容内容内容内容内容
      </t-popup>
    </dd>
    <dd class="mt20">
      <pre v-highlight="popup2"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">弹出宽度</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="visible3=true">100rem</t-button>
      <t-popup v-model="visible3" title="提示" width="100rem">
        内容内容内容内容内容内容内容内容内容内容内容内容
      </t-popup>
    </dd>
    <dd class="mt20">
      <pre v-highlight="popup3"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">beforeClose</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="visible4=true">100rem</t-button>
      <t-popup v-model="visible4" title="提示" :before-close="handleBefore">
        内容内容内容内容内容内容内容内容内容内容内容内容
      </t-popup>
    </dd>
    <dd class="mt20">
      <pre v-highlight="popup4"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TPopupBeforeCloseParams, TPopupPositionParams } from '@/base/types/components'

const visible1 = ref<boolean>(false)
const visible2 = ref<boolean>(false)
const visible3 = ref<boolean>(false)
const visible4 = ref<boolean>(false)
const position = ref<TPopupPositionParams>('top')

const handlePosition = (pos: TPopupPositionParams) => {
  position.value = pos
  visible2.value = true
}

const handleBefore: TPopupBeforeCloseParams = (done) => {
  setTimeout(() => {
    done(true)
  }, 1000)
}

const popup1 = `<t-button @click="visible1=!visible1">开启</t-button>
<t-popup v-model="visible1" title="提示">
  内容内容内容内容内容内容内容内容内容内容内容内容
</t-popup>`
const popup2 = `<t-button @click="handlePosition('top')">top</t-button>
<t-button @click="handlePosition('right')">right</t-button>
<t-button @click="handlePosition('bottom')">bottom</t-button>
<t-button @click="handlePosition('left')">left</t-button>
<t-popup v-model="visible2" :position="position" title="提示">
  内容内容内容内容内容内容内容内容内容内容内容内容
</t-popup>
const visible2 = ref<boolean>(false)
const position = ref<string>('top')
const handlePosition = (pos: string) => {
  position.value = pos
  visible2.value = true
}`
const popup3 = `<t-button @click="visible3=true">100rem</t-button>
<t-popup v-model="visible3" title="提示">
  内容内容内容内容内容内容内容内容内容内容内容内容
</t-popup>`

const popup4 = `<t-button @click="visible4=true">100rem</t-button>
<t-popup v-model="visible4" title="提示" :before-close="handleBefore">
  内容内容内容内容内容内容内容内容内容内容内容内容
</t-popup>
import type { TPopupBeforeCloseParams } from '@/base/types/components'
const handleBefore: TPopupBeforeCloseParams = (done) => {
  setTimeout(() => {
    done(true)
  }, 1000)
}`
</script>

<style scoped lang="scss">

</style>
